<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="./js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
$(document).ready(function() {
	$arrMarkers = [];
	$arrInfoWindows = [];
	$("#results_div").hide();
    $myLatlng = new google.maps.LatLng(17.4178504943848, 78.4505767822266);
    var myOptions = {
      zoom: 13,
      center: $myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
       
    $map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            	    
    $ipbox = $("<input type='text' size='15'>");
	$ipbtn = $("<input type='button' value='Search!'>");
	$space="&nbsp;&nbsp;&nbsp;&nbsp;";  	
	$com= $("#win-xp").prepend($ipbox).append($ipbtn);
	 $infoWindow = new google.maps.InfoWindow;

   	$("#search_box").append($com);

    $ipbtn.bind('click',function(){
	     $address = $ipbox.val();
	     var geocoder = new google.maps.Geocoder();
	     geocoder.geocode({address: $address}, function(results, status) {
	       if (status == google.maps.GeocoderStatus.OK) {
		        searchLocationsNear(results[0].geometry.location);
			        //console.log("$$$$$$$   "+results[0].geometry.location);
	       } else {
		         alert('Your input '+$address + ', didnt match! Try again');
	       }
	     });			   
	   });    

   function searchLocationsNear(center) {
	   //  clearLocations(); 
	     var searchUrl = './ISearch?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + $('#my-dropdown3').val();
		  $bounds = new google.maps.LatLngBounds();

	     $.getJSON(searchUrl, function($data) {
	    	 $.each($data,function(i,$item){
	           //  console.log("entered");
	         		var $point = new google.maps.LatLng(parseFloat($item.lat), parseFloat($item.lng));   
	         		var $icon="./images/red16by16.png";
	         	//	console.log("----- "+$point); 	  
	         	   	var $marker = new google.maps.Marker({
	             	   	position:$point,
	             	   	map:$map,
	             	   	icon:$icon,
	             	   	title:$item.rname
	             	   	});
					$arrMarkers[i]=$marker;
						 $html = "<span style='color: black;font-face:tahoma; font-size: 10pt;'>"+$item.rname+"</span>"
					$infowindow = new google.maps.InfoWindow({
						content: $html
						});
	         	   $arrInfoWindows[i]=$infowindow;
	         	   
	         	//    console.log($html+"      <---------");
					$bounds.extend($point);

	         	    createResultsDiv($item.rname,$item.distance,i);
	         	    //bindInfoWindow($marker, $map, $infoWindow, $html);
	             });
				 $map.fitBounds($bounds);

             $("#map_canvas").width("505px");
             $("#results_div").show();
             $("#results_div").width("120px");
			
	       });
		    //$map.setCenter($marker);
	      };

		function createResultsDiv(rname,distance,i){
			//  console.log(rname,distance,i);
			 // $txt=$("<span id='each_result' style='color: black;font-face:tahoma; font-size: 8pt;'/>");
			 // $txt.append("<br><b>"+rname+"</b><br>"+distance+" KM<br><br>")
			 // $txt.bind('click', generateTriggerCallback($marker, 'click'));
			  $("#results_div").append("<span  STYLE='font-size:10pt;font-weight:bold;'><br><a href='#' rel=" + i + ">" +rname + "</a><br>"+distance+" KM<br><br></span>");		  
		    }

	    function bindInfoWindow($marker, $map, $infoWindow, $html) {
	    	  google.maps.event.addListener($marker, 'click', function() {    		
	    	    $infoWindow.setContent($html);
	    	    $infoWindow.open($map, $marker);
	    	  });
	    	}
			
		$(function(){
			
		// "live" bind click event
		$("#results_div a").live("click", function(){
			var i = $(this).attr("rel");
			// this next line closes all open infowindows before opening the selected one
			for(x=0; x < $arrInfoWindows.length; x++){ $arrInfoWindows[x].close(); }
			$arrInfoWindows[i].open($map, $arrMarkers[i]);
		});
	});
		

    });
</script>


<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style type="text/css" media="screen">
      #friendWrapperCanvas {
        border : 2px solid #979797;
        width : 100%;
        height : 50px;
      }
      </style>
</head>
<body>
<div id="maincontainer">

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b><!--  BODY--></b> <!-- Body -->
<div id="container">
<div id="head">
<div id="header"><br>
<br>
<br>
<table><tr><td><div align="left"><img src="images/eatables_small_main.png"	alt="eatables.in" width="100" height="50" align="right"/></div></td>
<td style=" font-size: large; font-family: Arial, Helvetica, sans-serif; color: #6B57FF; background-color: #FFFFFF; text-align: left; font-weight: bold;">Welcome to Eatables.in - iSearch for Hyderabad</td></tr></table>

<div id="win-xp" style="background-color:yellow; text-align:center;">
<select id="my-dropdown3">
	<option value="1" selected="selected">1 KM</option>
	<option value="3">3 KM</option>
	<option value="5">5 KM</option>
	<option value="10">10 KM</option>
	<option value="20">20 KM</option>
	<option value="30">30 KM</option>
</select></div>


</div>
</div>
<div id="main">

	<div id="content_left"><br />
		<div id="results_map">
		<table><tr><td>
			<div id='results_div' style='width: auto; height: 500px; overflow:scroll;'></div>
			</td><td>
			<div id="map_canvas" style="width: 660px; height: 500px;"></div>
			</td></tr>
			</table>
		</div>
	</div>

	<div align="center"><span class="style12"></span></div>
	<div class="spacer"></div>

</div>

<div id="footer"><!-- footer--></div>
</div>
</div>
</div>

</div></div>
<div id="friendWrapperCanvas">
		<h3>Want to share your favorite Restaurant ?</h3>
		<form name="comment_form" method="post">
			<div id="user">
				<fb:login-button length='long' onlogin="update_user_box();"></fb:login-button>
			</div>
		</form>
    </div>
<script type="text/javascript">
function update_user_box() {
var user_box = document.getElementById("user");

user_box.innerHTML =
"<span>" +
      "<table>" +
           "<td>" +
               "<fb:profile-pic uid='loggedinuser' facebook-logo='true'></fb:profile-pic>" +
           "</td>" +
           "<td>" +
               "<fb:name uid='loggedinuser' useyou='false'></fb:name>" +
               " can <input type=\"button\" onclick=\"submitComment();\" value=\"Recommend\"> a restaurant." +
           "</td>" +
      "</table>" +
+ "</span>";

FB.XFBML.Host.parseDomTree();
}

function submitComment() {
    FB.Connect.streamPublish(null, null, null, null, "Share your favorite Restaurant...", null, false, null); 
}

</script>
<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" mce_src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"> </script>
<script type="text/javascript">
    var api_key = "606e1e692fac07ea4633fdf388a6e8ee";
    var channel_path = "xd_receiver.htm";
    FB.init(api_key, channel_path);
</script>
</body>
</html>
